<link rel="stylesheet" href="src/css/normalize.css">
<style>
  body {
    background-color: #dedede;
  }

  .hi-options {
    background-color: #fafafa;
    width: 150px;
    font-size: 10pt;
    font-family: century gothic;
    border: 1px solid rgba(192, 0, 0, 0.25);
  }
  
  .hi-options button {
    border: 0;
    background-color: #fafafa;
    width: 100%;
    cursor: pointer;
    text-align: left;
    padding-bottom: 5px;
  }
  
  .hi-options button div {
    width: 25px;
    height: 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    margin-left: -6px;
    margin-top: 5px;
    float: left;
  }
  
  .hi-options button span {
    position: relative;
    top: 5px;
    left: 7px;
  }
  
  .hi-options .btn-bottom {
    border-bottom: 1px solid rgba(192, 0, 0, 0.25);
  }
  
  .hi-options button:hover {
    background-color: #c00000;
  }
</style>

<body>

<div class="hi-options">
  <button>
    <div>
    
    </div>
    <span>
      Book Section
    </span>
  </button>
  
  <button>
    <div>
    
    </div>
    <span>
      Access Point
    </span>
  </button>
  
  <button>
    <div>
    
    </div>
    <span>
      Point of Interest
    </span>
  </button>
  
  <button class="btn-bottom">
    <div>
    
    </div>
    <span>
      Trigger Area
    </span>
  </button>
  
  <button class="btn-bottom">
    <div>
    
    </div>
    <span>
      Find...
    </span>
  </button>
  
  <button>
    <div>
    
    </div>
    <span>
      Zoom In
    </span>
  </button>

  <button>
    <div>
    
    </div>
    <span>
      Zoom Out
    </span>
  </button>
</div>

</body>